<template>
  <div>
    <!-- <h2>{{ singer.name }}简介</h2> -->
    <p style="padding: 20px">{{ tableData.briefDesc }}</p>
    <div v-for="item in tableData.introduction">
      <h2 style="padding: 20px">{{ item.ti }}</h2>
      <h5 style="padding: 0 20px; color: grey">{{ item.txt }}</h5>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { storage } from "@/stores/storage";
import { getSingerDes } from "@/service/songs.js";
export default defineComponent({
  setup() {
    let store = storage();
    const { singerId } = storeToRefs(store);
    const loading = ref(true);

    let tableData = ref({});
    if (singerId.value)
      getSingerDes(singerId.value)
        .then((res) => {
          if (res.status === 200) {
            let data = res.data;
            tableData.value.briefDesc = data.briefDesc;
            tableData.value.introduction = data.introduction;
          }
          loading.value = false;
        })
        .catch((err) => {
          if (err) ElMessage("网络错误,请重新尝试");
        });
    return {
      singerId,
      tableData,
      loading,
    };
  },
});
</script>

<style scoped></style>
